(function () {
    "use strict";
     
    var restfulWebServiceBaseUri, personListFindAllUri, personByIdUri,
    callService, ajaxCallFailed,
    getpersonById, displaypersonList, displaypersonDetail,
    propertyListFindAllUri, propertyByIdUri, getPersonProperties,
    displaypropertyList;
     

    restfulWebServiceBaseUri = "http://192.168.2.11:8080/";
     
    personListFindAllUri = restfulWebServiceBaseUri + "people";
    personByIdUri = personListFindAllUri + "/{id}/";

    propertyListFindAllUri = personByIdUri + "properties";
    propertyByIdUri = personListFindAllUri + "/{propId}/";

     
     
    // Execute after the page one dom is fully loaded
    $(".one").ready(function () {       
        // Retrieve person list
        callService(personListFindAllUri, displaypersonList);
         
        // Attach onclick event to each row of person list on page one
        $("#personList").on("click", "li", function(event){
            getPersonProperties($(this).attr("id"));
        });
    });
       
    // Call a service URI and return JSONP to a function
    callService = function (Uri, successFunction) {
        $.ajax({
            type: "GET",
            url: Uri,
            contentType: "application/json",
            error: ajaxCallFailed,
            failure: ajaxCallFailed,
            success: successFunction
        });         
    };

    getPersonProperties = function (personID) {
        callService(propertyListFindAllUri.replace("{id}", personID), displaypropertyList);
    };
     
    // Called if ajax call fails
    ajaxCallFailed = function (jqXHR, textStatus) {
        console.log("Error: " + textStatus);
        console.log(jqXHR);
        $("form").css("visibility", "hidden");
        $("#errorMessage").empty().
        append("Sorry, there was an error." + textStatus).
        css("color", "red");
    };
     
    // Display person list on page one
    displaypersonList = function (person) {
        var personList = "";
                 
        $.each(person, function(index, perp) {
            personList = personList.concat(
                "<li id=" + perp.id.toString() + " data-transition='slide'>" +
                "<a href='#'>" +
                perp.name.toString() + "</a></li>");
        });
         
        $('#personList').empty();
        $('#personList').append(personList).listview("refresh", true);
    };
     
    // Display person detail on page two
    displaypropertyList = function(property) {
        $.mobile.loading( 'show', {
            text: '',
            textVisible: false,
            theme: 'a',
            html: ""
             
        });
        $.mobile.changePage( $("#two"), { transition: "slide"} );
	var propertyList = "";
                 
        $.each(property, function(index, prop) {
            propertyList = propertyList.concat(
                "<li id=" + prop.id.toString() + " data-transition='slide'>" +
                "<a href='#'>" +
                prop.propertyName.toString() + "</a></li>");
        });
         
        $('#propertyList').empty();
        $('#propertyList').append(propertyList).listview("refresh", true);
        /*var personDetail = "";
                 
            $.each(person, function(key, value)
            {
                if(!value)
                {
                    value = "&nbsp;";
                }
                 
                personDetail = personDetail.concat
                (
                    "<div class='detail'>" +
                    "<div class='field'>" + key + "</div>" +
                    "<div class='value'>" + value + "</div>" +
                    "</div>"
                );  
            }
            );

         
        $("#personDetail").empty().append(personDetail);
*/
    };
     
  
} ());
